import React, { Component } from 'react'
import {Table,Button,Popconfirm,Modal} from 'antd'
import Addmusic from './music/Addmusic.js'
import Editmusic from './music/Editmusic.js'
import ReactAudioPlayer from 'react-audio-player';
import axios from 'axios'
import './model.css'

export default class Music extends Component {
    state={
        showAddUserDialog: false,//显示添加用户的对话框
        showEditUserDialog:false,//显示修改的对话框
        isModalVisible:false,//音乐对话弹框
        editUserRow:null,//当前编辑的用户信息
        deleteArr:[],
        userlist:[],
        musicName:'',
        musicSinger:'',
        musicUrl:'',
        musicIndex:0,
        columns:[{key:'music_id',title:'编号',dataIndex:'music_id',align:'center',width:80},
            {title:'歌曲名称',dataIndex:'music_name',align:'center',width:150},    
            {title:'歌手',dataIndex:'music_singer',align:'center',width:100},
            {title:'添加时间',dataIndex:'music_time',align:'center',width:180},
            {title:'url',dataIndex:'music_url',align:'center',
            render:(item,row,index)=>{
                return(
                    <>
                        <div onClick={()=>{this.showModal(row,index)}}>{item}</div>
                        <Modal wrapClassNmae='web'
                         visible={this.state.isModalVisible} title='预览歌曲' 
                         width={450} footer={null} onCancel={this.handleCancle}>
                            <h2>{this.state.musicName}——{this.state.musicSinger}</h2> 
                            <ReactAudioPlayer src={this.state.musicUrl}  controls />
                        </Modal>
                    </>
                )
            }
        },
        {title:'编辑',dataIndex:'del',
        render:(del,row)=>{
            return(
                <div >
                    <Button 
                    onClick={()=>this.setState({showEditUserDialog:true,editUserRow:row})}
                    style={{width:'60px'}}  type="primary">编辑</Button>
                    <Popconfirm 
                        onConfirm={()=>{this.deleteUser(row.music_id)}}
                        onText='确认'
                        cancelText='取消'
                        title="您确认要删除吗"
                    >
                        <Button style={{width:'60px'}}  type="danger" >删除</Button>
                    </Popconfirm>
                </div>
            )
        }}]
    }

    showModal=(row,index)=>{
        // console.log(row,index);
        this.setState({isModalVisible: true,musicUrl:row.music_url,musicIndex:index,
            musicName:row.music_name,musicSinger:row.music_singer});
        

    }
    handleCancle=()=>{
       //只能先暂停在退出！！！
        this.setState({isModalVisible: false})
    }


    get=()=>{
        const token=localStorage.getItem('token');
        if(token){
            axios.get('https://wx.xxmtcds.top:2333/admin/music',{
                headers: {'authorization':`${token}`}
            })
            .then(res=>{
                // console.log(res.data);
                let arr=res.data;
                arr.sort((a,b)=>{
                    return a.music_id-b.music_id;
                })

                this.setState({userlist: res.data , nextid : parseInt(arr[arr.length-1].music_id)+1})
            })
            .catch(error=>{
                console.log(error);
            })

        }
    }

    componentDidMount() {
        this.get();
    }
    componentWillUnmount() {
        this.setState = ()=>false;
    }
    
    //多选删除
    deletelist=()=>{
        const {deleteArr,userlist}=this.state;
        let idArr=[];
        let newlist=userlist;
        
        console.log(deleteArr);
        for(let i=0;i<deleteArr.length;i++){
            newlist = newlist.filter(item=>item.music_id !== deleteArr[i].music_id);
        }
        for(let i=0;i<deleteArr.length;i++){
            idArr.push(deleteArr[i].music_id);
        }
        // console.log(idArr);

        const token=localStorage.getItem('token');
        if(token){
            console.log(token);

        axios({
            method:'delete',
            url:'https://wx.xxmtcds.top:2333/admin/music',
            data:{
               isRows:true,
               idArr:idArr
            },
            headers: {'authorization':`${token}`}
       })
        .then(function(response){
          console.log(response);
        })
        .catch(err=>console.log(err))
    }
        this.setState({ userlist: newlist });
    }

    //行删除
    deleteUser=(adminid)=>{
        // console.log(adminid);
        
        const token=localStorage.getItem('token');
        if(token){
            console.log(token);

            axios({
                method:'delete',
                url:'https://wx.xxmtcds.top:2333/admin/music',
                data:{
                    isRows:false,
                    id:adminid
                },
                headers: {'authorization':`${token}`}
            })
                .then(function(response){
                    console.log(response);
                })
                .catch(err=>console.log(err))
        }
        const {userlist}=this.state;
        let templist=userlist;
        templist=templist.filter((item)=>item.music_id!=adminid)
        this.setState({ userlist: templist });
    }

    hideAddUserDialog = () => {
        this.setState({showAddUserDialog: false});
      }
    hideEditUserDialog=()=>{
        this.setState({showEditUserDialog: false});
    }
    userRowSelection={
        onChange:(selectedRowKeys,selectedRows)=>{
            this.setState({deleteArr:selectedRows});//主码
        }
    }


   edituser=(oldval,newval)=>{
    
        let templist=this.state.userlist;
        let arr=[];
        let brr={};
        brr.music_id=oldval.music_id;
        
        if(oldval.music_name!=newval.music_name){
            brr.music_name=newval.music_name;
        }
        if(oldval.music_singer!=newval.music_singer){
            brr.music_singer=newval.music_singer;
        }
        if(oldval.music_time!=newval.music_time){
            brr.music_time=newval.music_time;
        }
        if(oldval.music_url!=newval.music_url){
            brr.music_url=newval.music_url;
        }

        templist.forEach((item,index)=>{
            if(item.music_id!=oldval.music_id){
             
                arr.push(item);
            }else{
                arr.push(newval);
            }
        })
        // console.log(arr);//新的数组
        // console.log(brr);//id和只改了哪一项

        const token=localStorage.getItem('token');
        if(token){
            console.log(token);

            axios.put("https://wx.xxmtcds.top:2333/admin/music",brr,{
                headers: {'authorization':`${token}`}
           
            })
            .then(function(response){
            console.log(response);
            })
            .catch(err=>console.log(err))
        }
        this.setState({userlist:arr});
   }



  render() {
    return (
        <div>
            <Button onClick={()=> this.setState({showAddUserDialog: true})} type="primary">添加</Button>
            <Popconfirm 
                onConfirm={this.deletelist}
                onText='确认'
                cancelText='取消'
                title="您确认要删除吗"
            >
                <Button type="danger">删除</Button>
            </Popconfirm> 
            <Table
                bordered
                style={{backgroundColor:'#FEFEFE'}}
                dataSource={this.state.userlist} 
                columns={this.state.columns}
                rowSelection={this.userRowSelection}//多选框
                rowKey='music_id'//主键
                pagination={{pageSize:4}}
            ></Table>
            <Addmusic get={this.get.bind(this)} close={this.hideAddUserDialog} visible={this.state.showAddUserDialog} />
            <Editmusic edituser={this.edituser.bind(this)}  data={this.state.editUserRow} close={this.hideEditUserDialog} visible={this.state.showEditUserDialog} />
       
        </div>
    );
  }
}

